<template>
  <view>
    <view class="display-btn">
      <view class="menu" :class="[moreObj.openMenu ? '' : 'hide-menu']">
        <view v-for="item of menuBtn" :key="item.label" class="menu-btn">
          <view :class="setBtnColor(item)" @tap.stop="btnClick(item)">
            <text :class="setIcon(item)" />
            <view>{{ item.label }}</view>
          </view>
        </view>
      </view>
      <view v-for="item of displayBtn" :key="item.label" class="btn" @tap.stop="btnClick(item)">
        <view :class="setIcon(item)" />
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ButtonProp } from "./interface/index";

export interface GlobalButton {
  buttonList: ButtonProp[];
  index?: number;
  rowData?: any;
  hideMenu?: number;
}

// 接受父组件参数，配置默认值
const props = withDefaults(defineProps<GlobalButton>(), {
  buttonList: () => [],
  index: -1,
  hideMenu: 0
});
let moreObj = reactive<ButtonProp>({
  label: "更多",
  icon: "icon-menu-unfold1",
  displayPosition: 1,
  hide: false,
  openMenu: false
});

let hideStatus = ref(true);

// 所有显示的按钮
const displayBtn = computed(() => {
  const btn = props.buttonList.filter(item => {
    const { permission, displayPosition } = item || {};
    if (permission) {
      const flag = isPermission(permission);
      return isDisplay(item) && displayPosition === 1 && flag;
    }
    return isDisplay(item) && displayPosition === 1;
    // 状态合法 并且 可以显示在外面
  });
  if (menuBtn.value.length) {
    btn.push(moreObj);
  }

  return btn;
});

//监听页面 initParam 改化，重新获取表格数据
watch(
  () => props.hideMenu,
  () => {
    if (hideStatus.value) return;
    changeMenuStatus(false);
  }
);

// 菜单的按钮
const menuBtn = computed(() => {
  const btn1 = props.buttonList.filter(item => {
    const { permission, displayPosition } = item || {};
    if (permission) {
      const flag = isPermission(permission);
      return displayPosition === 0 && isDisplay(item) && flag;
    }
    return displayPosition === 0 && isDisplay(item);
  });
  return btn1;
});

// 设置按钮颜色
const setBtnColor = (item: ButtonProp) => {
  if (typeof item.hide === "function") {
    return !item.hide(props.rowData) ? "disabled-btn" : "enable-btn";
  }
  return item.hide ? "enable-btn" : "disabled-btn";
};

// 按钮是否显示
const isDisplay = item => {
  if (typeof item.hide === "function") {
    return item.hide(props.rowData);
  }
  return item.hide;
};

// 设置图标
const setIcon = item => {
  const { icon } = item;
  return "iconfont " + icon;
};

// 按钮点击
const btnClick = item => {
  // 根据添加显示的按钮
  if (typeof item.hide === "function") {
    if (item.hide(props.rowData)) {
      item?.method(props.rowData, props.index);
    }
  } else {
    if (item.label === "更多") {
      changeMenuStatus(!item.openMenu);
    } else {
      item?.method(props.rowData, props.index);
    }
  }
};

// 修改菜单显示状态
const changeMenuStatus = (flag: boolean) => {
  for (let item of displayBtn.value) {
    if (item.label === "更多") {
      item.openMenu = flag;
      item.icon = !item.openMenu ? "icon-menu-unfold1" : "icon-menu-unfold";
      break;
    }
  }
  if (flag) {
    hideStatus.value = true;
    setTimeout(() => {
      hideStatus.value = false;
    }, 500);
  }
};
</script>
<style lang="scss" scoped src="./index.scss"></style>
